<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <div class="tit-1">
      <span class="tit-1-left"
        ><i @click="goStory(bookItem)" class="iconfont icon-lt"></i
      ></span>
      <span class="tit-1-right"
        ><i class="iconfont icon-weixinxiaochengxu"></i
      ></span>
    </div>

    <div class="tit">{{bookItem.bookName}}</div>
    <div class="con">
      <img :src="bookItem.bookImg" alt="" />
      <div class="con-1">
        {{bookItem.storyDetail}}
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as api from '../../../api/home'
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      bookItem: {},
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.bookId = this.$route.params.id;
    api
      .toStoryDetail({ bookId: this.bookId })
      .then((res) => {
        console.log("成功", res);
        this.bookData = res.data;
        this.bookItem = res.data[0];
      })
      .catch((err) => {
        console.log("失败", err);
      });
  },
  // Vue方法定义
  methods: {
    goStory(item) {
      this.$router.push({
        path: `/story/${item.bookId}`,
      });
    },
  },
};
</script>

<style scoped>
@import url("../../../../assets/font/iconfont.css");
/* @import url(''); 引入css类 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  background: rgb(255, 255, 255);
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 10000;
}

.tit-1 {
  width: 100%;
  height: 44px;
  /* background: wheat; */
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 44px;
}
.tit-1-left {
  margin-left: 16px;
  font-weight: 600;
  color: rgb(195, 195, 195);
}
.tit-1-right {
  margin-right: 16px;
  margin-top: 4px;
}
.tit-1-right i {
  line-height: 44px;
  font-size: 32px;
}
.tit {
  width: 80%;
  height: 25px;
  margin: 23px 0 10px 18px;
  font-size: 18px;
  font-weight: 600;
}
.tit-C {
  font-weight: normal;
  font-size: 14px;
  margin: 0 18px;

  color: rgb(170, 170, 170);
}
.con {
  width: 90%;
  height: calc(100vh - 102px);
  margin: 0 auto;
}
.con img {
  width: 100%;
  height: 168px;
}
</style>